body{
    padding: 0;
    margin:0;
    font-family: '微软雅黑'
}


/*进度条开始*/

.progressBar {
    margin: 10px;
    padding: 10px;
    width: 500px;
    height: 300px;
    background: #EEE;
    font-family: '微软雅黑';
    position: relative;
}

.progressBar .barline {
       float: left;
    width: 340px;
    background: #FFF;
    border: 2px solid #4DBF7D;
    height: 12px;
    display: inline-block;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -170px;
}

.progressBar .barline #percent {
    position: absolute;
    left: 0px;
    top: -30px;
    display: inline-block;
    color: #4DBF7D;
    font-size: 16px;
}

.progressBar .barline #line {
    float: left;
    height: 12px;
    overflow: hidden;
    background: #4DBF7D;
    border-radius: 0px;
    background-image: -webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
    background-image: linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;

    -webkit-animation: progressBar 1s linear infinite;
    -moz-animation: progressBar 1s linear infinite;
    -ms-animation: progressBar 1s linear infinite;
    -o-animation: progressBar 1s linear infinite;
    animation: progressBar 1s linear infinite;
}

@-webkit-keyframes progressBar {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@-o-keyframes progressBar {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progressBar {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

.progressBar .barline #msg {
    position: absolute;
    left: 50%;
    top: 24px;
    display: inline-block;
    color: #4DBF7D;
    font-size: 14px;
    width: 100px;
    text-align: center;
    margin-left: -50px;
}

/*进度条结束*/